/**
 * 工作程序弹窗
 */
<template>
<vp-dialog ref="manualDialog" :span="2">
    <template #title>
        <vp-label zh="选择工作程序" en="Choose manual"/>
    </template>
    <vp-card class="mb5">
        <el-form ref="searchFormRef" :model="searchForm" @submit.prevent
            @keyup.enter="handleSearch" label-width="120px">
            <vp-search-row :show-more="showMore">
                <vp-search-col>
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="编号" en="No."  /></template>
                        <el-input v-model="searchForm.bh" v-trim placeholder="" clearable></el-input>
                    </el-form-item>
                </vp-search-col>
                <vp-search-col>
                    <el-form-item prop="bt">
                        <template #label><vp-label zh="标题" en="Title"  /></template>
                        <el-input v-model="searchForm.bt" v-trim placeholder="" clearable></el-input>
                    </el-form-item>
                </vp-search-col>
                <vp-search-col btn-col>
                    <vp-btn-search :loading="loading" @click="handleSearch"/>
                    <vp-btn-reset @click="handleSearchReset"/>
                </vp-search-col>
            </vp-search-row>
        </el-form>
    </vp-card>
    <vp-card v-loading="loading">
        <vp-table 
            ref="tableRef"
            :data="tableData"  
            highlight-current-row
            @current-change="handleCurrentChange" 
            @sort-change="handleSortChange"
            :height="`calc(100vh - 450px - ${showMore?'47px':'0px'}`"
            row-key="id">
            <el-table-column align="center" label="#" type="index">
            </el-table-column>
            <el-table-column prop="bh" sortable="custom"  show-overflow-tooltip :min-width="140">
                <template #header><vp-label zh="编号" en="No."/></template>
                <template #default="scope">
                    <el-space >
                        <span v-html="markTextColor(searchForm.bh, scope.row.bh)"/>
                        <FilePopover :count="scope.row.fjcount"  :ywid ="scope.row.fjglid"></FilePopover>
                    </el-space>
                </template>
            </el-table-column>
            <el-table-column prop="bc" show-overflow-tooltip :min-width="80">
                <template #header><vp-label zh="版次" en="Edition"/></template>
            </el-table-column>
            <el-table-column prop="bt" sortable="custom"  show-overflow-tooltip :min-width="200">
                <template #header><vp-label zh="标题" en="Title"/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.bt, scope.row.bt)"/>
                </template>
            </el-table-column>
            <el-table-column  prop="sxrq" show-overflow-tooltip :min-width="140">
                <template #header><vp-label zh="生效日期" en="Effective Date"/></template>
            </el-table-column>
        </vp-table>
    </vp-card>
    <template #footer>
        <vp-btn-empty  @click="handleEmpty"/>
        <vp-btn-confirm  @click="handleSave"/>
    </template>
</vp-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';

export default defineComponent({
    name: "VpManualDialog",
    components: {},
    emits:["confirm"],
    setup(props, context) {
        const state = reactive({
            searchForm: {
				bh: "",
                bt: "",
                lx: 20,
                yxbs: 1,
                ssgzcxid: "",
			},
            page: {
				total: 0, // 总条数
				pageNum: 1, // 当前页
				pageSize: 999, // 分页大小
				sortColumn: "",
				sortOrder: ""
			},
            selectedId: '',
			tableData: [],
            manual: {},
            showMore: false,
            loading: false,
            callback:(data: any)=>{}
		});
        const manualDialog = ref();
        const searchFormRef = ref();
        const tableRef = ref();

        const handleOpen = (options: any)=>{
            state.selectedId = options.selectedId;
            state.searchForm.lx = options.lx;
            state.searchForm.ssgzcxid = options.ssgzcxid || "";
            state.callback = options.callback;
            manualDialog.value.handleOpen();
            loadDataList();
        }

        const loadDataList = () => {
			state.loading = true;
			request.get('/quality/manual/openList', {
                params: {
                    ...state.searchForm,
                }
			}).then(res => {
				state.tableData = res?.data?.list || [];
				state.page.total = res?.data?.total || 0;
				state.page.pageNum = res?.data?.pageNum || 1;
                const currentRow = state.tableData.find((obj: any)=>{return obj.id === state.selectedId});
                if (currentRow) {
                    tableRef.value.setCurrentRow(currentRow);
                }
 			}).finally(()=>{
				state.loading = false
			})
		}

        const handleCurrentChange = (val: any) => { 
            state.manual = val;
        }

        const handleSave = () => {
            if(state.loading){
                return;
            }
            state.callback(state.manual);
            manualDialog.value.handleClose();
        }

        const handleSearch = ()=>{
            loadDataList();
		}

        const handleSearchReset = () => {
            searchFormRef.value.resetFields();
        }

        const handleSortChange = (column: any) => {
            loadDataList();
        }

        const handleEmpty = () => {
            if(state.loading){
                return;
            }
            state.callback({});
            manualDialog.value.handleClose();
        }

        return {
            ...toRefs(state),
            searchFormRef,
            handleSave,
            manualDialog,
            handleOpen,
            handleCurrentChange,
            handleSearch,
            handleSearchReset,
            handleSortChange,
            markTextColor,
            handleEmpty,
            tableRef,
        }
    },
})
</script>
